<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="layui/layui.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <script type="text/javascript">
        function myclose() {
            layer.closeAll();
        }
    </script>
</head>
<body>
<script type="text/html" class="demoTable" id="myDiv">
    <div style="float: left">
        <div class="layui-btn-group">
            <button class="layui-btn-sm layui-btn-primary" id="expand" lay-event="expand">全部展开</button>
            <button class="layui-btn-sm layui-btn-primary" id="fold" lay-event="fold">全部折叠</button>
        </div>
    </div>
    <div class="layui-inline" style="float:right;height:29px;">
        <button class="layui-btn layui-btn-sm" data-type="reload" lay-event="insert">新增子板块</button>
        <button class="layui-btn layui-btn-sm" data-type="reload" lay-event="insertfa">新增父板块</button>
    </div>

</script>
<script>
    layui.use(['table','treetable'], function () {
        var $ = layui.$;
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        var treetable =layui.treetable;
        treetable.render({
            id:'testStock',
            treeColIndex: 1,
            treeSpid: '000',
            treeIdName: 'stockId',
            treePidName: 'stockFatherId',
            elem: '#trackone',
            toolbar: '#myDiv',//显示在表头的工具条
            url: 'selectstock?stockName=',
            page: false,
            cols: [[
                {type: 'numbers'},
                {field: 'stockId', width: 200, title: '股票板块编号'},
                {field: 'stockName', title: '股票板块名称'},
                {field: 'stockType', width: 300, align: 'center', title: '备注'},
                {templet: '#barDemo', width: 300, align: 'center', title: '操作'}
            ]],
            done: function () {
                // layer.closeAll('loading');
            }
        });
        table.on('toolbar(trackone)',function (obj) {
            var checkStatus=table.checkStatus(obj.config.id);//得到表格选中行的ID
           if (obj.event=='insert'){
                var index=layer.open({
                    area:['500px','350px'],
                    type: 1,
                    title: '添加子板块信息信息',
                    closeBtn: 1,
                    move:false,
                    content:$("#add")
                });
            }else if (obj.event=='insertfa') {
               var index = layer.open({
                   area: ['500px', '350px'],
                   type: 1,
                   title: '添加父板块信息',
                   closeBtn: 1,
                   move: false,
                   content: $("#addfa")
               })
           }else if (obj.event=='expand') {
               treetable.expandAll('#trackone');
           }else if (obj.event=='fold') {
               treetable.foldAll('#trackone');
           }
        })
        /*table.on('tool(trackone)',function (obj) {
            var data = obj.data;
            alert(data)

        })*/

        table.on('tool(trackone)',function (obj) {
            var data = obj.data;
            if (obj.event==='delete'){
                $.post('deletestock','stockId='+data.stockId,function (msg) {
                    table.reload('testStock')
                })
            }else if (obj.event==='update'){
                var bookObj=$.parseJSON(JSON.stringify(data));
                form.val("upform",bookObj);
                var index=layer.open({
                    area:['500px','350px'],
                    type: 1,
                    title: '修改板块信息',
                    closeBtn: 1,
                    move:false,
                    content:$("#up")
                });
            }
        })

        form.on('submit(addsubmit)',function () {
            var formData= form.val("addform");
            $.post('insertstock',formData,
                function(msg) {
                    table.reload('testStock')
                });
            table.reload('testStock')
        });
        form.on('submit(addfasubmit)',function () {
            var formData= form.val("addfaform");
            $.get('insertstock',formData,
                function(msg) {
                    table.reload('testStock')
                });
            table.reload('testStock')
        });
        form.on('submit(upsubmit)',function () {
            var formData= form.val("upform");
            $.post('updatestock',formData,
                function(msg) {
                    table.reload('testStock')
                });
            table.reload('testStock')
        });
    });

    layui.use(['tableSelect'],function () {
        //加载用到layui组件
        var form = layui.form;
        var $ = layui.$;
        var tableSelect = layui.tableSelect;
        //下拉表格 的渲染
        tableSelect.render({
            elem: '#stockFatherId',//渲染表格 与 文本框绑定
            searchKey: 'stockName',//后端根据这个名称得到下拉表格中文本框的值
            table: {
                url: 'selectstocktwo',//数据接口
                cols: [[
                     {type: 'radio'}
                    , {field: 'stockId', title: '板块编号'}
                    , {field: 'stockName', title: '板块名称'}
                ]]
            },
            //回调函数
            done: function (elem, data) {
                /* var NWEJOIN=[]*/
                layui.each(data.data, function (index, item) {
                    //将值添加到文本框中
                    /*NWEJOIN.push(item.userName);*/
                    $("#stockFatherId").val(item.stockId);
                    // $("#stockId").val(item.userId);
                })
                /*elem.val(NEWJSON.join(","));*/
            }
        })
    })
</script>
<table id="trackone" lay-filter="trackone"></table>

<div id="add"
     style="display: none; height: 100%; height: 100%; text-align: center;">
    <form id="addform" lay-filter="addform"
          class="layui-form layui-form-pane"
          style="margin: 30px auto; display: inline-block;">
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">板块编号</label>
            <div class="layui-input-inline">
                <input type="text" name="stockId" lay-verify="required"
                       autocomplete="off" placeholder="请输入编号" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">板块名称</label>
            <div class="layui-input-inline">
                <input type="text" name="stockName" lay-verify="required"
                       autocomplete="off" placeholder="请输入名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">父板块编号：</label>
            <div class="layui-input-inline">
                <input type="text" name="stockFatherId" id="stockFatherId" lay-verify="required"
                       autocomplete="off" placeholder="请输编号" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">备注：</label>
            <div class="layui-input-inline">
                <input type="text" name="stockType"  placeholder="请输备注" class="layui-input">
            </div>
        </div>
        <div style="position: absolute; bottom: 20px; left: 30%;">
            <button class="layui-btn" lay-submit="" lay-filter="addsubmit">
                <i class="layui-icon">&#x1005;</i>添加
            </button>
        </div>
        <div style="position: absolute; bottom: 20px; left: 55%;">
            <!--lay-submit="" 具备提交功能  lay-filter   具有筛选作用-->
            <button class="layui-btn layui-bg-red cancel" onclick="myclose()"  type="button">
                <i class="layui-icon">&#x1006;</i>取消
            </button>
        </div>
    </form>
</div>
<div id="up"
     style="display: none; height: 100%; height: 100%; text-align: center;">
    <form id="upform" lay-filter="upform"
          class="layui-form layui-form-pane"
          style="margin: 30px auto; display: inline-block;">
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">板块编号</label>
            <div class="layui-input-inline">
                <input type="text" name="stockId" lay-verify="required"
                       autocomplete="off" placeholder="请输入编号" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">板块名称</label>
            <div class="layui-input-inline">
                <input type="text" name="stockName" lay-verify="required"
                       autocomplete="off" placeholder="请输入名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">父板块编号：</label>
            <div class="layui-input-inline">
                <input type="text" name="stockFatherId" lay-verify="required"
                       autocomplete="off" placeholder="请输编号" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">备注：</label>
            <div class="layui-input-inline">
                <input type="text" name="stockType"  placeholder="请输备注" class="layui-input">
            </div>
        </div>
        <div style="position: absolute; bottom: 20px; left: 30%;">
            <button class="layui-btn" lay-submit="" lay-filter="upsubmit">
                <i class="layui-icon">&#x1005;</i>修改
            </button>
        </div>
        <div style="position: absolute; bottom: 20px; left: 55%;">
            <!--lay-submit="" 具备提交功能  lay-filter   具有筛选作用-->
            <button class="layui-btn layui-bg-red cancel" onclick="myclose()"  type="button">
                <i class="layui-icon">&#x1006;</i>取消
            </button>
        </div>
    </form>
</div>
<div id="addfa"
     style="display: none; height: 100%; height: 100%; text-align: center;">
    <form id="addfaform" lay-filter="addfaform"
          class="layui-form layui-form-pane"
          style="margin: 30px auto; display: inline-block;">
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">板块编号</label>
            <div class="layui-input-inline">
                <input type="text" name="stockId" lay-verify="required"
                       autocomplete="off" placeholder="请输入编号" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">板块名称</label>
            <div class="layui-input-inline">
                <input type="text" name="stockName" lay-verify="required"
                       autocomplete="off" placeholder="请输入名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">备注：</label>
            <div class="layui-input-inline">
                <input type="text" name="stockType"  placeholder="请输备注" class="layui-input">
            </div>
        </div>
        <div style="position: absolute; bottom: 20px; left: 30%;">
            <button class="layui-btn" lay-submit="" lay-filter="addfasubmit">
                <i class="layui-icon">&#x1005;</i>添加
            </button>
        </div>
        <div style="position: absolute; bottom: 20px; left: 55%;">
            <!--lay-submit="" 具备提交功能  lay-filter   具有筛选作用-->
            <button class="layui-btn layui-bg-red cancel" type="button">
                <i class="layui-icon">&#x1006;</i>取消
            </button>
        </div>
    </form>
</div>
<div style="display: none;" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="update"><i
            class="layui-icon">&#xe642;</i>修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete"><i
            class="layui-icon">&#xe640;</i>删除</a>
</div>

</body>
</html>